<template>
  <view class="box">
    <!--自定义配置-->
    <view>
      <!--标题-->
      <view
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20rpx;
          padding: 20rpx;
          background: linear-gradient(to bottom, #daf0fe, #fff);
        "
      >
        <view style="font-weight: 600">
          <view>自定义配置</view>
          <view style="font-weight: normal; color: #0083ff; font-size: 20rpx; margin-top: 10rpx">
            <wd-icon name="help-circle" size="20rpx"></wd-icon>
            <text style="margin-left: 4rpx">按需自定义设置相关数据!</text>
          </view>
        </view>
        <view>
          <image src="../../../static/random.png" style="width: 100rpx; height: 100rpx" />
        </view>
      </view>

      <!--自定义内容保存-->
      <view style="display: flex; align-items: center; padding: 0rpx 20rpx">
        <view style="width: 140rpx; display: flex; align-items: center">
          标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;签
        </view>
        <view
          style="
            background-color: #f2f2f2f2;
            width: 100%;
            padding: 10rpx 20rpx;
            border-radius: 10rpx;
          "
        >
          <wd-input v-model="settingsModel.customizeTag" no-border style="background: #f2f2f2" />
        </view>
      </view>
      <view style="color: #8a8a8a; margin-top: 8rpx; font-size: 20rpx; padding: 0rpx 20rpx">
        自定义标签非必填
      </view>

      <view
        v-for="(item, index) in settingsDataList"
        :key="index"
        @click="onClickEdit(item, index)"
      >
        <view style="display: flex; align-items: center; margin-top: 20rpx; padding: 0rpx 20rpx">
          <!--标签-->
          <view style="width: 140rpx; display: flex; align-items: center">
            <text style="color: red">*</text>
            {{ item.label }}
          </view>
          <!--数据-->
          <view
            style="
              background-color: #f2f2f2f2;
              width: 100%;
              padding: 10rpx 20rpx;
              border-radius: 10rpx;
            "
            :style="{ color: numEditIndex === index ? '#0083ff' : '#000' }"
          >
            {{ item.data || '请输入数据' }}
          </view>
        </view>
        <view style="color: #8a8a8a; margin-top: 8rpx; font-size: 20rpx; padding: 0rpx 20rpx">
          {{ item.tip }}
        </view>
      </view>
    </view>
    <!--按钮-->
    <view
      style="
        display: flex;
        font-size: 24rpx;
        justify-content: center;
        margin-top: 20rpx;
        margin-bottom: 20rpx;
      "
    >
      <view
        style="
          border: 1px solid #f2f2f2f2;
          width: 40%;
          text-align: center;
          padding: 16rpx 0px;
          border-radius: 30rpx;
          margin-right: 20rpx;
        "
      >
        恢复默认值
      </view>
      <view
        style="
          border: 1px solid #f2f2f2f2;
          width: 40%;
          text-align: center;
          padding: 16rpx 0px;
          border-radius: 30rpx;
          background-color: #0083ff;
          color: #fff;
        "
        @click="handleUpdate"
      >
        保存
      </view>
    </view>

    <!--其他配置-->
    <view style="padding: 20rpx" v-if="lineType === 'hold'">
      <view style="font-weight: 600">其他配置</view>
      <view style="display: flex; margin-top: 20rpx">
        <view
          style="
            text-align: center;
            font-size: 20rpx;
            border: 1px solid #f2f2f2f2;
            padding: 8rpx 40rpx;
            border-radius: 40rpx;
          "
          @click="handleDelete"
        >
          <wd-icon name="delete" />
          <view>删除持有</view>
        </view>

        <view
          style="
            text-align: center;
            font-size: 20rpx;
            border: 1px solid #f2f2f2f2;
            padding: 8rpx 40rpx;
            border-radius: 40rpx;
            margin-left: 20rpx;
          "
        >
          <wd-icon name="money-circle" />
          <view>定投</view>
        </view>
      </view>
    </view>
    <!--弹窗-->
    <wd-message-box />

    <!--虚拟键盘-->
    <wd-number-keyboard
      v-model:visible="visibleKeyboard"
      @input="onInput"
      @delete="onDelete"
      :title="numEditIndex == -1 ? '' : '当前值为：' + settingsDataList[numEditIndex].data"
    ></wd-number-keyboard>
  </view>
</template>

<script lang="ts" setup>
import { http } from '@/utils/http'
import { useMessage } from 'wot-design-uni'

// 定义可传递属性
const props = defineProps({
  // 基金ID,即fundId
  id: {
    type: String,
    default: '',
  },
  // 线型：optional => 自选，hold => 持有，default => 默认
  lineType: {
    type: String,
    default: '',
  },
  // 自选ID
  optId: {
    type: String,
    default: '',
  },
})
// 方法更新
const emit = defineEmits(['change'])
// 自定义配置表单
const settingsModel = ref({
  customizeTag: '',
  defaultAddVal: 0,
  defaultReduceVal: 0,
  defaultSafeVal: 0,
  defaultDangerVal: 0,
})
// 详情
const detailModel = ref({
  syl1n: 0,
  nowVal: 0,
  estimateRate: 0,
  nowRate: 0,
  name: '',
  code: '',
  estimateValDate: '',
  valDate: '',
  managerCompany: '',
  risk: '',
  type: '',
  manager: '',
  subType: '',
  buildDate: '',
})
// 点击的key
const numEditIndex = ref(-1)
// 弹窗
const message = useMessage()
// 默认键盘
const visibleKeyboard = ref(false)

// 自定义配置列表
const settingsDataList = ref([
  {
    key: 'defaultAddVal',
    label: '加仓线',
    data: '',
    tip: '①值必须 < 1 ②加仓线值 > 安全线值③仅可保留3位小数',
  },
  {
    key: 'defaultSafeVal',
    label: '安全线',
    data: '',
    tip: '①值必须 < 1    ②加仓线值 > 安全线值③仅可保留3位小数',
  },
  {
    key: 'defaultReduceVal',
    label: '减仓线',
    data: '',
    tip: '①值必须 > 1    ②减仓线值 < 危险线值③仅可保留3位小数',
  },
  {
    key: 'defaultDangerVal',
    label: '危险线',
    data: '',
    tip: '①值必须 > 1    ②减仓线值 < 危险线值③仅可保留3位小数',
  },
])
// 点击编辑数据
const onClickEdit = (data, index) => {
  numEditIndex.value = index
  visibleKeyboard.value = true
}

// 虚拟键盘input
const onInput = (value) => {
  const data = settingsDataList.value[numEditIndex.value].data
  if (data.length <= 4) {
    settingsDataList.value[numEditIndex.value].data = data + '' + value
  }
}

// 虚拟键盘删除
const onDelete = () => {
  const data = settingsDataList.value[numEditIndex.value].data
  if (data.length > 2) {
    settingsDataList.value[numEditIndex.value].data = data.substring(0, data.length - 1)
  }
}

// 加载配置
const loadSettings = () => {
  let url = ''
  const param = { optId: props.optId }
  // 加载自选配置
  if (props.lineType === 'optional') {
    url = '/sys/fund/optional/detail'
  } else if (props.lineType === 'hold') {
    // 加载持有配置
    url = '/sys/fund/hold/detail'
  }
  // 发起请求
  http.get(url, param).then((res: any) => {
    if (res.success) {
      const result = res.result
      settingsDataList.value[0].data = result.defaultAddVal.toFixed(3)
      settingsDataList.value[1].data = result.defaultSafeVal.toFixed(3)
      settingsDataList.value[2].data = result.defaultReduceVal.toFixed(3)
      settingsDataList.value[3].data = result.defaultDangerVal.toFixed(3)
      settingsModel.value = result
    }
  })
}

// 更新配置
const handleUpdate = () => {
  // 请求地址
  let url = ''
  // 加载自选配置
  if (props.lineType === 'optional') {
    url = '/sys/fund/optional/update'
  } else if (props.lineType === 'hold') {
    // 加载持有配置
    url = '/sys/fund/hold/update'
  }
  // 设置参数
  settingsModel.value.defaultAddVal = Number(settingsDataList.value[0].data)
  settingsModel.value.defaultSafeVal = Number(settingsDataList.value[1].data)
  settingsModel.value.defaultReduceVal = Number(settingsDataList.value[2].data)
  settingsModel.value.defaultDangerVal = Number(settingsDataList.value[3].data)
  // 发起请求
  http.post(url, settingsModel.value).then((res: any) => {
    if (res.success) {
      // 刷新图表,更新key会主动刷新图表
      emit('change')
      // 提示
      uni.showToast({
        title: '更新成功',
        duration: 2000,
      })
    }
  })
}

// 删除持有
const handleDelete = () => {
  message
    .confirm({
      msg: '确定删除持有？',
      title: '提示',
      zIndex: 1000,
    })
    .then(() => {
      // 请求地址
      let url = ''
      // 加载自选配置
      if (props.lineType === 'optional') {
        url = '/sys/fund/optional/delete'
      } else if (props.lineType === 'hold') {
        // 加载持有配置
        url = '/sys/fund/hold/delete'
      }
      http.post(url, { id: props.optId }).then((res: any) => {
        if (res.success) {
          uni.showToast({
            title: '删除成功',
            duration: 2000,
          })
          message.close()
        }
      })
    })
    .catch(() => {
      console.log('点击了取消按钮')
      message.close()
    })
}

onLoad(() => {
  loadSettings()
})
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
}
</style>
